<template>
  <div>
    <ul>
      <li>
        <el-input type="text" v-model="queryParams.pileNumber" placeholder="请输入桩号"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.mileage" placeholder="请输入里程信息"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.offset" placeholder="请输入偏距信息"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.coordinateX" placeholder="请输入坐标 X 值"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.coordinateY" placeholder="请输入坐标 Y 值"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.pileBottomElevation" placeholder="请输入桩底高程"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.pileTopElevation" placeholder="请输入桩顶高程"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.pileDiameter" placeholder="请输入桩径"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.pileLength" placeholder="请输入桩长"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.steelCageLength" placeholder="请输入钢筋笼长度"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.overPouringLength" placeholder="请输入超灌长度"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.groundElevation" placeholder="请输入地面高程"></el-input>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.actualPileBottomElevation" placeholder="请输入实际桩底高程"></el-input>
      </li>
      <li>
        <el-date-picker v-model="queryParams.excavationTime" type="datetime" placeholder="请选择开挖时间"></el-date-picker>
      </li>
      <li>
        <el-date-picker v-model="queryParams.holeOpeningTime" type="datetime" placeholder="请选择开孔时间"></el-date-picker>
      </li>
      <li>
        <el-date-picker v-model="queryParams.holeCompletionTime" type="datetime" placeholder="请选择成孔时间"></el-date-picker>
      </li>
      <li>
        <el-date-picker v-model="queryParams.reinforcementCageLoweringTime" type="datetime" placeholder="请选择下钢筋笼时间"></el-date-picker>
      </li>
      <li>
        <el-date-picker v-model="queryParams.conduitLoweringTime" type="datetime" placeholder="请选择下导管时间"></el-date-picker>
      </li>
      <li>
        <el-date-picker v-model="queryParams.pouringTime" type="datetime" placeholder="请选择浇筑时间"></el-date-picker>
      </li>
      <li>
        <el-input type="text" v-model="queryParams.testBlockNumber" placeholder="请输入试块编号"></el-input>
      </li>
      <li> <el-button @click="submitQuery">查询</el-button></li>
      <li> <el-button @click="onreset()">清空</el-button></li>
    </ul>

  </div>
</template>

<script setup>
import { ref } from 'vue';

const queryParams = ref({
  pileNumber: '',
  mileage: '',
  offset: '',
  coordinateX: '',
  coordinateY: '',
  pileBottomElevation: '',
  pileTopElevation: '',
  pileDiameter: '',
  pileLength: '',
  steelCageLength: '',
  overPouringLength: '',
  groundElevation: '',
  actualPileBottomElevation: '',
  excavationTime: null,
  holeOpeningTime: null,
  holeCompletionTime: null,
  reinforcementCageLoweringTime: null,
  conduitLoweringTime: null,
  pouringTime: null,
  testBlockNumber: ''
});

const emit=defineEmits(['queryData'])

const submitQuery = () => {
  console.log('查询参数:', queryParams.value);
  // 这里可以调用你的查询接口，将 queryParams 作为参数传递
  emit('queryData', queryParams);
  
};

</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 元素之间的间距 */
}

li {
  min-width: 200px; /* 设置最小宽度，可根据需要调整 */
}
</style>